<template>
  <el-dialog title="选择标签" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="600px">
    <div class="dialog-big">
      <el-form>
        <div class="search-title">
          <div class="search">
            <el-input v-model="input2" placeholder="搜标签组/标签名" clearable size="small"/>
            <el-button icon="el-icon-search" size="small" @click="upDataList"></el-button>
          </div>
        </div>
        <el-form-item v-for="(item, index) in dataList" :key="index" v-if="dataList && dataList.length>0">
          <div class="item-title">
            <i class="el-icon-caret-bottom" style="font-size: 16px; position: relative; top: 0px;margin-right: 10px; cursor: pointer;" :class="!item.showChild?`el-icon-caret-right`:``" @click="getShow(index)"></i>
            <el-checkbox
              @change="(val) => handleCheckAllListChange(val, item)"
              :indeterminate="itemIndeterminate(item)"
              v-model="item.checkAll">
              {{ item.label }}
            </el-checkbox>
          </div>
          <el-checkbox-group
            v-model="checkedData" @change="handleCheckedCitiesChange" v-if="item.showChild">
            <!--            显示以id为主，不然不回显-->
            <el-checkbox v-for="items in item.child" :key="items.field" :label="items.field">{{ items.label }}
            </el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item v-if="isShow" style="margin-left: 20px">
          <div class="item-title">
<!--            <i class="el-icon-caret-bottom" style="font-size: 16px; position: relative; top: 4px;margin-right: 10px; cursor: pointer;" :class="!item.showChild?`el-icon-caret-right`:``" @click="getShow(index)"></i>-->
            <el-checkbox disabled>
              个人标签
            </el-checkbox>
          </div>
          <div class="tips"><i class="el-icon-info"></i>多号聚合模式下不支持选择个人标签，请至单号模式下操作使用</div>
        </el-form-item>
      </el-form>
    </div>
    <div class="footer-btn" slot="footer">
      <el-button type="primary" @click="handleCloseDialog">取消</el-button>
      <el-button @click="upDataList">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  name: 'selectAllTags',
  props: {
    dataList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    chooseValue: {
      type: Array,
      default: () => {
        return [];
      }
    },
    type:{
      type:String,
      default:'smart',
    },
    isShow: {
      type: Boolean,
      default:false,
    },
    //


  },
  components: {},
  data() {
    return {
      showAddLabelGroup: false,
      showAddLabel: false,
      active: 0,
      value: false,
      input2: null,//标签名
      form: {
        label: null,//搜索标签
      },
      checkedData: [], //选择多选框时选中的值
    }
  },
  created() {
    if (this.chooseValue && this.chooseValue.length > 0) {
      this.checkedData=this.chooseValue;
    }
  },
  mounted() {
  },
  watch: {},
  methods: {
    upDataList(){
      this.$emit('upDataList',this.input2,this.checkedData);
    },
    getShow(index) {
      this.dataList[index].showChild = !this.dataList[index].showChild;
    },
    // 全选
    handleCheckAllListChange(val, item) {
      console.log('val', val);
      if (val) {
        //全选时
        item.child.forEach(sitem => {
          this.checkedData.push(sitem.field)
        })
      } else {
        item.child.forEach(sitem => {
          this.checkedData = this.checkedData.filter((vitem => {
            return sitem.field != vitem;
          }))
        })
      }
    },
    // 是否全选
    itemIndeterminate(item) {
      console.log('item', item);
      return !item.checkAll && item.child.some(sitem => this.checkedData.includes(sitem.field));
    },
    handleCheckedCitiesChange(val) {
      this.dataList.forEach(item => {
        item.checkAll = true;
        item.child.forEach(sitem => {
          if (!val.includes(sitem.field)) {
            item.checkAll = false;
          }
        });
      });
      this.$forceUpdate();

    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false);
      this.$emit('handleQuery');
    }
  }
}
</script>

<style scoped lang="scss">
.footer-btn {
  display: flex;
  justify-content: flex-end;
}

.dialog-big {
  display: flex;

  .dialog-title {
    display: flex;
    background-color: #f9f9f9;
    height: 44px;
    align-items: center;
    outline: 1px solid #e9e9e9;
    padding: 0 16px;
    justify-content: space-between;
    box-sizing: border-box;
  }
}

::v-deep .el-dialog__body {
  overflow-y: auto;
  max-height: 600px;
  padding: 0px 20px 20px 20px;

  .el-form {
    padding: 0px;
    flex: 1;

    .search-title {
      display: flex;
      align-items: center;
      grid-gap: 8px;
      gap: 8px;
      padding: 10px 12px;
    }

    .item-title {
      display: flex;
      align-items: center;
      height: 30px;
      margin-bottom: 10px;
    }

    .el-form-item {
      margin: 10px;

      .el-checkbox-group {
        padding-left: 10px;

        .el-checkbox {
          border-radius: 4px;
          border: 1px solid #e9e9e9;
          height: 26px;
          line-height: 26px;
          margin-right: 15px !important;

          .el-checkbox__label {
            padding: 0px 10px;
            font-size: 12px;
            line-height: 26px !important;
          }

          .el-checkbox__input {
            display: none;
          }

          &.is-checked {
            background: #3070ff;
            color: #fff;
            border-color: #3070ff;

            .el-checkbox__label {
              color: #fff !important;

            }
          }
        }

      }
    }

  }

  .el-switch {
    margin-right: 10px;
  }
}

.addSpan {
  color: #3070ff;
  cursor: pointer;
}

.talList {
  display: flex;
  flex-direction: column;
  width: 120px;
  border-right: 1px solid #eee;

  li {
    list-style: none;
    padding: 8px 24px;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
    position: relative;
    cursor: pointer;

    &.active {
      color: #3070ff;

      &:after {
        content: '';
        height: 100%;
        width: 2px;
        position: absolute;
        right: 0px;
        background: #3070ff;
        top: 0px;

      }
    }
  }
}

.search {
  display: flex;
  width: 100%;

  ::v-deep.el-input__inner {
    border-right: none !important;
    border-radius: 4px 0px 0px 0px;
  }

  ::v-deep .el-button--default {
    border-radius: 0px 4px 4px 0px;
    padding: 0px 10px;
  }
}
.tips {
  line-height: 20px;
}
</style>
